This topic describes the demo pages shipped with the Process Platform HTML5 SDK and their limitations.

• All these are simple Web pages built using jQuery and jQuery Mobile.  The jQuery library is mandatory, but jQuery Mobile can be replaced by any other UI library.
• Few pages display the use of KnockoutJS and jsRender for rendering and managing data. This can be replaced by any other rendering engine.
• Authentication is handled internally in the cordys.authentication plug-in.

Most of the demo pages are standalone pages and can be directly viewed in the browsers. To view from the native app, refer to Making an App Available to a Mobile User. However, few pages that are provided to showcase the use of the methods from cordys.workflow, cordys.process, and cordys.case have dependencies on the BPM and the case instances or Inbox tasks. As the dependent components are not shipped along with the SDK, these are just examples and may not render the expected data.

The demo pages are classified according to the following criteria:

• The task details or task approval pages
• The standalone Web pages
• The dependent Web pages
• The Web pages for reference

Task Details or Task Approval Pages

• approvetask.htm 

This Web page:

• • can be used by any business process that involves sending a document or an item for approval.
  • displays the business identifiers of the process and the options specified in the message map.
  • can be used for approval or rejection and also for any other action by specifying different options. Refer to Working with the Generic Approval Page for more information.
  • depends upon the inputs from the Process Platform Process and cannot be viewed independently on the browser.
  • is added as an External User Interface in the process and does not require the mobile tagging.

The following image displays the Generic Approval Task page used in the Order Management Process: 

 
Here, the Customer, Product, Cost, Quantity, and Discount are added as Business Identifiers; Approve and Reject are added as the custom Actions.     

• customapproval.htm 

This Web page:

• • is added as a reference for the user to create their own task details page or task approval page.
  • depends upon the inputs from the Process Platform Process and cannot be viewed independently on the browser.
  • takes in OrderID as the input from the Process and displays the Order Details. The user can select the Shipment Details and confirm Shipment.
  • is added as an External User Interface in the process and does not require the mobile tagging.

 For more information, refer to Building a Custom Approval Page.

The following image displays the Custom Task Details page:

Standalone Web Pages

Google Visualization and Fusion Charts are supported only by the Android browser in Android 3.2 or later. Other browsers for the Android mobiles, such as Mozilla Firefox and Google Chrome support the charts irrespective of the Android version.  This is applicable to the following Web pages: customersbycountry.htm productsinstock.htm

The Web pages mentioned in this section can be viewed on the browser using the following URL:

http://<server-name>/home/<organization-name>/html5/demo/<demo-page-name>.htm

To view from the Native App, refer to Making an App Available to a Mobile User.

• customersbycountry.htm

This demo page describes an example to display the graphs using the Process Platform HTML5 SDK by integrating it with the  Fusion Charts. In this example, all the customers of the Northwind Table are retrieved and a pie chart of the number of customers by the country is displayed as shown in the following image:

You can click any country to view the customers from that country in a list. The $.cordys.model plug-in along with KnockoutJS are used to bind the data and the graph. For more information on this Web page, refer Example 1 in Displaying Graphs on a Mobile Device.

• employees.htm

In this demo page, all the employees from the Northwind Database are rendered using  jsRender. Alternatively, KnockoutJS can also be used for rendering the data. For more information on using KnockoutJS, refer the employeeslist.htm section. The cordys.ajax plug-in is invoked to retrieve the employee information by specifying the method with its namespace and parameters. For more information on this Web page, refer to Retrieving the Data. The list of employees is displayed as shown in the following image:

• employeeslist.htm

This demo page lists all the employees from the Northwind database and uses KnockoutJS to render the data. For more information on using jsRender, refer to the employees.htm section above. The method read() from cordys.model plug-in is used to retrieve the employee information by specifying the method with its namespace and parameters.For more information on this Web page, refer to Example 1 in Building Read-only Mobile Applications.

• employeeslistwithnavigation.htm

This demo page describes how to implement pagination over the Web services implementing the Cordys cursor mechanism using the cordys.model plug-in. This is based on the example in Building Read-only Mobile Applications. The demo page is built on the Employees table from the Northwind Database. For more information on this Web page, refer to Implementing Pagination
The following image displays a list of four employees per page in the App: 

• employeeswithdetails.htm

This Web page is added as an enhancement to the page employeeslist.htm. You can tap the required Employee in the list to view the corresponding details as shown in the following image:

For more information on this Web page, refer to Example 2 in Building Read-only Mobile Applications.

• employeeswithlocation.htm

This Web page is added as an example to show the integration with Google Maps using the Process Platform HTML5 SDK. It lists all the employees from the Northwind database and on selecting a particular employee the details page is displayed with the address of the employee on Google Map.  The $.cordys.model plug-in and KnockoutJS are used to bind the data. For more information on this Web page, refer to Integrating with Google Maps using HTML5 SDK. The following image displays an Employee and their Address and the corresponding Location is shown using Google Maps.

• employeeswithtranslation.htm

This Web page is added as an example to display the features of cordys.translation plug-in which is used to translate messages and labels in the HTML pages. This plug-in works both on HTML5 pages on the server and in the Native App. To access from Process Platform App, you can just set the mobile language to Nederlands for Dutch translation. To view the page translated in Dutch directly from the browser, you can suffix 
?language=nl-NL to the URL as shown in the following example:

http://<server-name>/home/<organization-name>/html5/demo/employeeswithtranslation.htm?language=nl-NL

For more information on this Web page, refer to Translating a Page into a Specific Language. The translatable content will be translated and displayed as shown in the following image:

• employeeswithupdate.htm

This example describes the procedure to build transactional mobile applications over the Process Platform Web services using the cordys.model plug-in. It uses the KnockoutJS library to handle the updates. This page uses methods read() and update() from the Process Platform Model plug-in.For more information on how to use Process Platform Model Plug-in for CRUD operations, refer to Building Transactional Mobile Applications. 

• jqueryvalidation.htm

This example describes the procedure to make a field mandatory such as input box or select box, and specify the validation rule such as minimum or maximum range. It is built on the Employees table from the Northwind Database and displays the employees form with the field validations. If all the mandatory fields are provided and the specified rules are met for the field, the employee data will be saved in the Employees table. For more information on this Web page, refer to Validating a Page Using jQuery Validation Plug-in.

• restsample.htm

This page describes retrieving the data from a REST Web service using cordys.ajax plug-in. The process is explained using an example Geo IP Locator. This example uses the REST Web service for retrieving the details of the provided IP address or host name. It uses Google Map for displaying the location of the IP address. You can provide the IP address or Host Name to view its location in the Google Map.

• productsinstock.htm

This demo page describes the procedure to display the graphs using the Process Platform HTML5 SDK by integrating it with  Google Visualization API. It retrieves all the products of the Northwind Table and displays a graph showing the number of available units of each product in a bar graph. The $.cordys.model plug-in and KnockoutJS are used to bind the data and the graph.For more information on this Web page, refer to Example 2 in Displaying Graphs on a Mobile Device. The following image displays the products and their respective units in stock:

• orderslistwithswipe.htm

This Web page is added as an example to display pagination with endless list. In mobile interfaces, pagination is usually done using an endless list instead of the pagination buttons. In an endless list, the specified number of records are retrieved first and when the scroll reaches the end of the page, the next set of records are retrieved and the result is appended to the existing list. This behavior continues till all the records are retrieved. This example retrieves all theOrders from the Northwind Database and the orders are listed using the endless list. For more information on this Web page, refer to Example 2 - Pagination With Endless List in Implementing Pagination.

Dependent Web pages

The cordys.mobile plug-in provides methods for accessing the device features. This plug-in is not a part of the Process Platform HTML5 SDK script. You must include the Process Platform HTML5 SDK script and the cordys.mobile  script by adding the following command in your code:

<script src="/cordys/html5/plugins/cordys.mobile.js" type="text/javascript"></script> To view page from the Native App, please refer How to make an App available to a Mobile User? 

The following pages can only be viewed using the Process Platform App, as they use the device features:

• takephoto.htm and   takephotourl.htm

This Web page describes the procedure to use the device features, in this case Camera, with the help of cordys.mobile plug-in. It displays the functionality of the method camera.getPicture. Once the process is complete, the image captured is displayed.     

• uploadphoto.htm

This Web page describes the procedure to browse a picture from the device and display it. It uses the method camera.getPicture with the source of the picture as the 'file system'. Once the process is complete, the image selected is displayed.

Web pages for reference

These pages will not render as expected as they have dependencies on the instances of other Process Platform Components such as, Process and Inbox, which are not included as a part of the SDK.

The following Web pages are shipped with the SDK for the reference and they describe the implementation of few methods from cordys.workflow and cordys.process plug-ins:

Report Damage Model

These Web pages were designed as a part of a sample scenario Report Damage, where a photo of the accident is captured and uploaded for reporting the damage.

• attachphoto.htm   

This Web page is used for attaching the photo to the model taken from the device camera and uploading it to the Process. It lists the use cases for getTaskDetails() and addAttachment() methods from the plug-ins cordys.workflow and getBusinessIdentifiers() from cordys.process.

• reportdamage.htm

This Web page is added as an example to display the use of navigator.geolocation.getCurrentPosition()  to get the current location of the user.